_CSS_Grid
UserCSS設定のための管理者用ページです。
一覧ページと関連リンクの見た目を整える系のコードまとめ。
/icons/水平線.icon
要素の表示・非表示（グリッドサイズにかかわらず設定）
/customize/ピン留めされたページを独立した段に表示する
code:x.css
@media screen and (min-width: 768px) { /* PCのみ */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
}
code:style.css
.grid:not(.grid-lg) li.page-list-item a .description, /* 概要欄 */
.grid li.page-list-item a .pin, /* Pinの折り曲げ（dog ear） */
.grid li.page-list-item.empty, /* 空のリンク */
.grid li.relation-label.empty-links, /* 空のリンクのラベル */
.grid li.relation-label a .icon-lg /* リンクアイコン */ {
display: none; /* 非表示 */
}
.grid li.page-list-item.pin a .title {
color: #7b4741; /* 折り曲げの代わりにPinのタイトルカラーを変更 */
}
.grid li.page-list-item a .header {
border-top: none; /* カード上部のラインを非表示 */
}
カードに影をつける
code:style.css
.grid li.page-list-item a {
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
.related-page-list {
margin: -2px; /* 両端のカードのshadowが描画されるように */
margin-top: 7px;
}
/icons/水平線.icon
グリッドサイズ（小）のデザイン調整
参考　/kiito-themes/グリッド&リスト
code:style.css
:root {
--grid-height: 84px; /* カードの高さを変数宣言して指定 */
}
.page-list .grid li {
height: var(--grid-height); /* 関連リンクのラベルも含めて高さ変更 */
width: 100%;
}
.grid li.page-list-item a .header {
z-index: 10;
/* text-shadow: 0px 0px 5px #fff,0px 0px 5px #fff,0px 0px 5px #fff; */
}
.grid li.page-list-item a .title {
font-size: 12px;
line-height: 16px;
-webkit-line-clamp: 5;
max-height: 80px; /* line-height * 5行 */
}
.grid li.page-list-item a .description { /* 表示した時用 */
font-size: 11px;
line-height: 16px;
padding: 6px 12px 6px;
}
.grid li.page-list-item a .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95%;
background-color: #fff;
z-index: 0;
opacity: .2;
}
.grid li.page-list-item a .icon img {
max-height: var(--grid-height);
max-width: 100%;
object-fit: contain;
}
#_import